<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>

    <form action="">
        <select name="" id="one" onchange="handleOne()">
            <option value=""></option>
        </select>
           <select name="" id="two" onchange="handleTwo()">

           </select>
            <select name="" id="three" >

           </select>
    </form>
</body>
<script>
    var one=document.querySelector('#one')
    var two=document.querySelector('#two')
    var three=document.querySelector('#three')
    var str=[
        {
            id:01,
            name:'张',
        },{
            id:02,
            name:'赵'
        }
    ]
    var str1=[
        {
            id:11,
            name:'张',
            info:01
        },{
            id:12,
            name:'赵',
            info:01
        },
        {
           id:21,
            name:'钱',
            info:02 
        },{
           id:22,
            name:'孙' ,
            info:02
        },
        {
           id:23,
           name:'李' ,
           info:02
        }
    ]
    var str2=[
        {
            name:'张',
            info:11
        },{
            name:'赵',
            info:12
        },
        {
           
            name:'钱',
            info:22 
        },{
          
            name:'孙' ,
            info:21
        },
        {
           
           name:'李' ,
           info:23
        }
    ]
    var option=`<option>请选择</option>`;
    var option1=`<option>请选择</option>`;
      var option2=`<option>请选择</option>`;
    for(var i=0;i<str.length;i++){
         option+=`<option value="${str[i].id}">
         ${str[i].name}
         </option>`
    }
  one.innerHTML=option
  two.innerHTML=option1
   three.innerHTML=option2
   function handleOne(){
       var val=one.value
       option1=`<option>请选择</option>`
       for(var j=0;j<str1.length;j++){
        if(str1[j].info==val){
              option1+=`<option value="${str1[j].id}">
         ${str1[j].name}
         </option>`
        }
  }
  two.innerHTML=option1
  }
     function handleTwo(){
       var val1=two.value
       option2=`<option>请选择</option>`
       for(var m=0;m<str2.length;m++){
        if(str2[m].info==val1){
              option2+=`<option value="">
         ${str2[m].name}
         </option>`
        }
  }
  three.innerHTML=option2
  }
</script>
</html>